<template>
  <div class="container bg-gray">
    <!-- filter -->
    <com-title-item class="mg20" title="查询条件">
      <el-form class="mt20" ref="queryForm" :model="queryParams" :inline="true" size="mini" label-width="100px">
        <el-row>
          <el-col class="filter-item" :lg="8" :xl="8">
            <el-form-item label="推送时间">
              <el-date-picker
                v-model="queryParams.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :editable="false"
                :picker-options="pickerOptions"
                value-format="timestamp"
                style="width: 100%;"
                :clearable="false"
                :default-time="['00:00:00', '23:59:59']"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col class="filter-item" :lg="5" :xl="5">
            <el-form-item label="房源类型">
              <el-select v-model="queryParams.houseType">
                <el-option
                  v-for="dict in houseTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col class="filter-item" :lg="5" :xl="5">
            <el-form-item label="端口类型">
              <el-select v-model="queryParams.portType">
                <el-option
                  v-for="dict in portTypeOptions()"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <!-- <el-form-item label="推送状态">
          <el-select v-model="queryParams.pushStatus" clearable>
            <el-option
              v-for="dict in pushStatusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item> -->

          <el-col :lg="5" :xl="5">
            <el-form-item class="ml20">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleClear">清空</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </com-title-item>

    <div class="table">
      <!-- table -->
      <el-table border :data="tableData" v-loading="loading" header-cell-class-name="table-header">
        <el-table-column label="推送房源" min-width="200">
          <template slot-scope="scope">
            <div class="house_detail">
              <div class="ellipsis" :title="scope.row.houDelVO.title">{{ scope.row.houDelVO.title }}</div>
              <div class>
                <span>{{ scope.row.houDelVO.room ? scope.row.houDelVO.room + '室' : '' }}</span>
                <span v-if="scope.row.houDelVO.room">{{ (scope.row.houDelVO.hall || 0) + '厅' }}</span>
                <span>{{ !scope.row.houDelVO.room && !scope.row.houDelVO.hall ? '未填户型' : '' }}</span>
                <span>|</span>
                <span>
                  {{
                    scope.row.houDelVO.buildSize != -1 && scope.row.houDelVO.buildSize
                      ? scope.row.houDelVO.buildSize + '㎡'
                      : '未填面积'
                  }}
                </span>
                <span>|</span>
                <span>
                  {{ scope.row.houDelVO.totalPrices > 0 ? scope.row.houDelVO.totalPrices / 10000 + '万' : '未填价格' }}
                </span>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="houseTypeName" label="房源类型" min-width="80"> </el-table-column>

        <el-table-column prop="portTypeName" label="推送网站" min-width="120"> </el-table-column>

        <el-table-column prop="account" label="推送帐号" min-width="120"> </el-table-column>

        <el-table-column prop="portHouKey" label="外网房源" min-width="130"> </el-table-column>

        <el-table-column label="推送设置" min-width="150">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.pushSetResult" :key="index">
              <span>{{ item }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="pushTime" label="推送时间" min-width="150"></el-table-column>

        <el-table-column label="推送状态" min-width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.pushStatus == 'T'">推送中</div>
            <div v-if="scope.row.pushStatus == 'S'">推送成功</div>
            <div v-if="scope.row.pushStatus == 'F'">推送失败</div>
          </template>
        </el-table-column>

        <el-table-column label="日志" min-width="150">
          <template slot-scope="scope">
            <el-tooltip class="item" placement="top">
              <!-- 弹窗 -->
              <div slot="content">
                <div v-for="(item, index) in scope.row.pushResult" :key="index">{{ item }}</div>
              </div>
              <!-- 内容 -->
              <div>
                <div class="text-nowrap" v-for="(item, index) in formatLogData(scope.row.pushResult)" :key="index">
                  {{ item }}
                </div>
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="d-flex">
        <pagination
          class="paging fr"
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import comTitleItem from '@/views/house/com/com-title-item';
import pagination from '@/components/Pagination';
import platform from '@/config/house/platform';
import { startOfDay, endOfDay, format, subDays } from 'date-fns';

export default {
  name: 'Log',

  components: {
    comTitleItem,
    pagination
  },

  props: {},

  data() {
    this.config = {
      PAGE_SIZE: 10
    };
    return {
      loading: false,
      total: 0,
      tableData: [],
      queryParams: {
        page: 1,
        pageSize: this.config.PAGE_SIZE,
        dateRange: [],
        houseType: 'ALL',
        portType: 'ALL'
        // pushStatus: ''
      },
      pickerOptions: {
        disabledDate: (time) => {
          let todayEnd = endOfDay(new Date()).getTime();
          let before30DayEnd = subDays(todayEnd, 30).getTime();
          return time.getTime() > todayEnd || time.getTime() < before30DayEnd;
        }
      },
      houseTypeOptions: [
        { dictValue: 'ALL', dictLabel: '全部' },
        { dictValue: 'SALES', dictLabel: '出售' },
        { dictValue: 'RENT', dictLabel: '出租' }
      ],
      portTypeOptions: () => {
        let options = Object.keys(platform).map((item) => {
          return { dictValue: item, dictLabel: platform[item] };
        });
        options.unshift({ dictValue: 'ALL', dictLabel: '全部' });
        return options;
      }
      // pushStatusOptions: [
      //   { dictValue: 'SUCCESS', dictLabel: '成功' },
      //   { dictValue: 'FAIL', dictLabel: '失败' },
      //   { dictValue: 'WAIT', dictLabel: '推送中' }
      // ]
    };
  },

  computed: {},

  watch: {},

  beforeMount() {},

  mounted() {
    this.resetDate();
    this.initFilter();
    this.getList();
  },

  methods: {
    // ------------------handle------------------
    handleSearch() {
      this.queryParams.page = 1;
      this.getList();
    },
    handleClear() {
      this.resetDate();
      this.getList();
    },
    // ------------------function------------------
    // 加载列表
    async getList() {
      try {
        this.loading = true;
        const { queryParams } = this;
        const { content } = await this.$api.pushLogList({
          startTime: queryParams.dateRange[0],
          endTime: queryParams.dateRange[1],
          page: queryParams.page,
          pageSize: queryParams.pageSize,
          delegationType: !queryParams.houseType || queryParams.houseType === 'ALL' ? '' : queryParams.houseType,
          portType: !queryParams.portType || queryParams.portType === 'ALL' ? [] : [queryParams.portType]
        });
        this.total = content.total || 0;
        this.tableData = content.list.map((item, index) => {
          return {
            ...item,
            portTypeName: platform[item.portType],
            houseTypeName: item.delegationType === 'SALES' ? '出售' : '出租',
            pushTime: format(item.pushTime, 'yyyy-MM-dd HH:mm')
          };
        });
      } catch (error) {
        console.log('error' + error);
      } finally {
        this.loading = false;
      }
    },
    // 重置筛选参数
    resetDate() {
      let endDay = new Date().getTime();
      let startDay = endDay - 6 * 24 * 60 * 60 * 1000;
      this.queryParams.dateRange = [startOfDay(startDay).getTime(), endOfDay(endDay).getTime()];
      this.queryParams.page = 1;
      this.queryParams.houseType = 'ALL';
      this.queryParams.portType = 'ALL';
      // this.queryParams.pushStatus = '';
    },
    // 初始化筛选传参
    initFilter() {
      const { type, port, time } = this.$route.params;
      if (time) {
        let startDay = startOfDay(time).getTime();
        let endDay = endOfDay(time).getTime();
        this.queryParams.dateRange = [startDay, endDay];
      }
      type && (this.queryParams.houseType = type);
      port && (this.queryParams.portType = port);
    },
    // 格式化日志数据
    formatLogData(data) {
      if (!(data && Array.isArray(data) && data.length)) {
        return [];
      }
      let list = data.slice(0, 3);
      if (data.length > 3) {
        list[2] = '...';
      }
      return list;
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/styles/colors.scss';
.container {
  min-width: 900px;
  min-height: calc(100vh - 84px);
  overflow: hidden;
}

.filter-item /deep/ .el-form-item__content {
  width: calc(100% - 100px);
}

.table {
  margin: 20px;
  padding: 20px;
  border-radius: 10px;
  background-color: $white;

  & /deep/ .table-header {
    background-color: $light-blue;
  }

  .paging {
    margin-top: 0;
  }
}
</style>
